<template>
	<view>
		<view class="cart-container" v-if="cart.length !== 0">
			<!-- 收货地址 -->
			<my-address></my-address>
			<!-- 商品列表 -->
			<view class="cart-tilte">
				<uni-icons type="shop" size="20"></uni-icons>
				<text class="cart-title-text">购物车</text>
			</view>
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="(goods,index) in cart" :key="index">
						<uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(goods)">
							<goods-item :goods="goods" :showRadio="showRadio" :showNum="showNum" @radioChange="radioChange" @numChange="numChange"></goods-item>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>	
				
			</view>
			<!-- 结算区域 分析 封装成为一个单独的组件-->
			<my-settle></my-settle>
		</view>
		<view class="empty-cart" v-else>
			<image src="/static/cart_empty@2x.png" mode=""></image>
			<text>空空如也</text>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		computed:{
			...mapState('cart_m',['cart']),
			...mapGetters('cart_m',['total']),
		},
		data() {
			return {
				showRadio:true,
				showNum:true,
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#C00000'
						}
					}
				]
			};
		},
		onLoad() {
			console.log(this.$store);
		},
		onShow() {
			this.setBadge();
		},
		methods:{
			...mapMutations('cart_m',['updateGoodsState','updateGoodsCount','removeGoodsById']),
			radioChange(goods_id_state){
				// 调用mutations
				this.updateGoodsState(goods_id_state);
			},
			numChange(goods_id_count){
				console.log(goods_id_count);
				this.updateGoodsCount(goods_id_count);
				console.log(this.total);
				this.setBadge();
			},
			// 在tabBar 购物车上加数字
			setBadge(){
				console.log(11);
				uni.setTabBarBadge({
					index:2,
					text:this.total + ''
				})
			},
			// 点击swipeitem删除动作触发的事件
			swipeItemClickHandler(goods){
				console.log(111);
				console.log(goods);
				this.removeGoodsById(goods.goods_id);
				this.setBadge();
			}
		}
	}
	/* 
	1. cart 购物车	 vuex  state 每个商品的信息
	 cart state [{},{},{}]
	 商品id  goods_id
	 商品名字 goods_name
	 商品价格 goods_price
	 商品的数量 goods_count  自己操作定义
	 商品的图片 goods_small_logo 
	 商品的勾选状态  goods_state 自己定义自己造  布尔值 true
	 
	 
	 cart 模块当中的state创建完毕 cart来自哪里
	 点击商品详情当中的 加入购物车 加入商品 cart state cart当中加入一条数据
	 
	 永久存储cart当中的数据 setStorageSync  state
	 
	 
	 
	 
	 目的： 将商品信息存储到storage   
	 商品信息是很多页面和组件都使用值  公共  vuex
	 vuex分模块  cart_m  cart   state--->cart[{},{},{}]
	 {} 有六个值
	 state:()=>{
		 return {
			 //storage当中存值 存 storage 没有[]
			cart ：JSON.parse(uni.getStorageSync('cart') || '[]')
		 }
	 }
	 
	 mutations
	 addToCart(){
		 判断什么时候加1
		 判断什么是时候push
		 永久存储
		 
	 }
	 
	 2.购物车数据的渲染  数据来源于vuex cart state
	 
	 
	 
	 vuex 
	state 存储数据
	mutations 直接更改state数据的方法  （state，obj）
	actions  间接更改state数据的方法  （obj,obj）  第一个对象 {state,commit}
	getter  根据state当中的数据进行计算
	moudles  分模块
	
	
	3.根据vuex cart模块 state cart数据 渲染购物车 数据列表
	 
	 分析 goods-item 组件 可以直接进行渲染 列表的数据
	 使用该goods-item  goods(每一个商品的信息)  是cart[{},{}]
	 cart   ...mapState  cart_m
	 
	 问题1：radio不应该一直显示  在购物车中显示  在商品列表当中不显示
	 v-if  可以控制 但没有条件 造 showRadio
	 
	 radio应该是可以能选中 也能取消
	 意思：checked goods.goods_state
	 cart_m  state  cart[{},{},{}]  {}当中的goods_state的值选中true 不选中false
	 意思：更改state当中的数据  找mutations 找到对应的{} 更新其对应的goods_state
	 根据goods_id查找  查找到对象之后更新goods_state 更新完毕后再将其存储到storage中
	 
	 
	 选中取消触发事件(找到goods_id  goods_state) ---调用mutations当中的更新的方法
	 
	 props   但是事件 写死了 能把事件提炼出来  $emit
	 
	 问题2 uni-number-box
	 uni-number-box value 
	 value的变化 本质 cart_m state cart[{}] goods goods_count的变化 
	 
	 在goods-item当中收集 最新的value  
	 value传递给父组件（cart页面）  绑定自定义事件  goods-item当中this.$emit调用自定义事件  收到value 
	 
	 ...mapMutaions
	 
	 更新state cart  mutations中的方法进行更新  
	 
	 4.商品的总数量
	 
	 5.商品的删除操作  使用uni-ui   uni-swipe-action  uni-swipe-action-item
	 点击删除之后 绑定事件
	 
	 本质删除 cart_m  state cart[{},{},{}] 当中的每一项  
			cart_m mutations中添加一个方法 删除cart当中符合条件的某项数据
			查找符合条件的某项
			goods_id
			
			页面收集goods_id      vuex mutations当中的方法接收goods_id  删除cart[]符合条件的这一项
	 
	 
	 
	 storage当中的数据
	 
	 注：购物车图标上的数字没随着删除而变化  total
	 
	 
	 
	 
	 6.购物车写完之后  购车当中有数据或者没有数据
	 cart_m  state cart[{},{}] 中有无数据
	 v-if cart.length == 0 
	 
	 v-else 图片空的购物车图片
	 
	 */
	
	/* 
	前端移动端开发1px问题如何解决？
	750*1334 iPhone6分辨率
	
	375*667   2
	1px    2 
	缩放 transform：scaleX  Y 
	rem适配
	
	 
	 
	 
	 */
	
	
</script>

<style lang="scss">
.cart-container{
	padding-bottom: 50px;
	.cart-tilte{
		height: 50px;
		padding-left: 10px;
		border-bottom: 1px solid #ccc;
		.cart-title-text{
			font-size: 30px;
		}
	}
}	
.empty-cart{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 150px;
	image{
		width: 100px;
		height: 100px;
	}
	text{
		font-size: 30px;
	}
}

</style>
